<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>2.导航关</title>
	
	<style type="text/css">
		body {
			text-align: center;
		}
		.one{font-size:40px;margin: 10px 0}
		.nav {			
			height: 80px;
			margin-top: 2px;
			background:#e9e9e9 url(logo.png) no-repeat left center;
			background-size: auto 100% ;
			padding-left: 350px; 
		}			
		.nav ul li{display: inline-block;line-height: 80px;margin: 0 10px}
		.nav ul li a{font-size:20px;font-weight: bold;text-decoration: none;color: black}
		.phone{
			height: 80px;line-height: 88px;
			float: right;padding-right:30px; 
			display: none;
		}		
		
		@media(max-width: 992px) and (min-width: 768px) {
			.nav ul{display: none;}
			.phone{display: block}		
		}
		/*手机端*/
		@media(max-width: 768px){
			.nav ul{display: none;}
			.phone{display: block}
			.nav {padding-left:0;background-size: 70% auto; }		
		}



	</style>
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<h4 class="one">响应式应用第二关： <span>导航关</span></h4>
	<div class="nav">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">头条新闻</a></li>
			<li><a href="#">学习新思想</a></li>
			<li><a href="#">学习科学</a></li>
			<li><a href="#">环球视野</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>	
		<div class="phone"><img src="nav.png"></div>
	</div>
</body>
</html>